<template>
	<view>
		<!-- <d-rili></d-rili> -->
		<image class="bg-set" src="../../static/global-bg.jpg" mode="widthFix"></image>
		<uni-calendar
			:selected="extraInfo"
			@change="change"
		>
		</uni-calendar>
		<tip-modal :modalName="modalName" :title="title" :content="content" @hideModal="hideModal"></tip-modal>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import TipModal from '@/components/TipModal.vue'
	import {queryCalendar} from '@/api/calendaer.js'
	import {mapState} from 'vuex'
	export default {
		name: 'my-canlendar',
		components: {
			uniCalendar,TipModal
		},
		data() {
			return {
				modalName: '',
				title: '',
				content: '',
				extraInfo: [
					{
						date: "2021-01-01",
						info: "3分",
						data: {
							content: "情绪能量：3分，这一天感到开心是因为见了很久没见的朋友。这一天感到疲惫是因为路程很遥远。"
						}
					},
					{
						date: "2021-01-02",
						info: "5分",
						data: {
							content: "情绪能量：5分，这一天感到开心是因为见了很久没见的朋友。这一天感到疲惫是因为路程很遥远。"
						}
					},
					{
						date: "2021-01-03",
						info: "0分",
						data: {
							content: "情绪能量：0分，这一天感到开心是因为见了很久没见的朋友。这一天感到疲惫是因为路程很遥远。"
						}
					},
					{
						date: "2021-01-04",
						info: "-2分",
						data: {
							content: "情绪能量：-2分，这一天感到开心是因为见了很久没见的朋友。这一天感到疲惫是因为路程很遥远。"
						}
					},
					{
						date: "2021-01-20",
						info: "1分",
						data: {
							content: "情绪能量：1分，这一天感到开心是因为见了很久没见的朋友。这一天感到疲惫是因为路程很遥远。"
						}
					},
					{
						date: "2021-01-21",
						info: "3分",
						data: {
							content: "情绪能量：3分，这一天感到开心是因为见了很久没见的朋友。这一天感到疲惫是因为路程很遥远。"
						}
					},
					{
						date: "2021-01-23",
						info: "2分",
						data: {
							content: "情绪能量：2分，这一天感到开心是因为见了很久没见的朋友，感到疲惫是因为路程很遥远。"
						}
					},
					{
						date: "2021-01-22",
						info: "3分",
						data: {
							content: "情绪能量：3分。这一天感到开心是因为见了很久没见的朋友，感到疲惫是因为路程很遥远。"
						}
					},
				]
			}
		},
		methods: {
			change(obj) {
				const data = obj.extraInfo.data
				if(data) {
					this.modalName = 'Modal'
					this.title = obj.fulldate
					this.content = data.content
				}
			},
			hideModal() {
				this.modalName = ''
			},
			getCalendar() {
				queryCalendar(this.userInfo.userid).then(res => {
					this.extraInfo = res.data
				})
			}
		},
		mounted() {
				this.getCalendar()
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style>
</style>
